<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src=".././static/js/public-head.js"></script>
</head>
<body >
<form class="layui-form " action="" lay-filter="xd-table-col-form" action="javascript:;">
    <input type="hidden" name="id"  value="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">字段名</label>
            <div class="layui-input-inline">
                <input type="text" name="field" placeholder="与获取字段一致,区分大小写"   autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">别名</label>
            <div class="layui-input-inline">
                <input type="text" name="title" lay-verify="" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">类型</label>
            <div class="layui-input-inline">
                <!--numbers（序号列）/space（空列）/radio（单选框列，layui 2.4.0 新增）/normal（常规列，无需设定）-->
                <select name="type" lay-verify="required">
                    <option value="normal">默认</option>
                    <option value="numbers">序号列</option>
                    <option value="space">空列</option>
                    <option value="radio">单选框</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">固定位置</label>
            <div class="layui-input-inline">
                <select name="fixed"  title="固定列位置需放在Table首或尾">
                    <option value=""></option>
                    <option value="left">左</option>
                    <option value="right">右</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">宽度</label>
            <div class="layui-input-inline">
                <input type="text" name="width"  placeholder="支持数字、百分比"  autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">最小宽度</label>
            <div class="layui-input-inline">
                <input type="text" name="minWidth"  placeholder="列自适应最小宽度" lay-verify="number"  value="120" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">所占行数</label>
            <div class="layui-input-inline">
                <input type="text" name="rowspan" lay-verify="number"   autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">所占列数</label>
            <div class="layui-inline">
                <div class="layui-input-inline"  onclick="commonUtil.openPage('所占列数','editTextArea.html?|colspan','60%','60%')" >
                    <textarea name="colspan" id="colspan" style="min-height:38px;height:36px;" placeholder="支持数字、SQL:select count(1) " readonly lay-verify="required" class="layui-input"></textarea>
                </div>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">开启合计</label>
            <div class="layui-input-inline">
                <select name="totalRow" lay-filter="totalRow">
                    <option value="false">否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">合计文本</label>
            <div class="layui-input-inline">
                <input type="text" name="totalRowText"    autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">数据位置</label>
            <div class="layui-input-inline">
                <select name="align" lay-verify="required">
                    <option value="left">居左</option>
                    <option value="center">居中</option>
                    <option value="right">居右</option>
                </select>
            </div>
        </div>

        <div class="layui-inline" id="xdtable-mergeFlag-item">
            <label class="layui-form-label">开启合并</label>
            <div class="layui-input-inline">
                <select name="mergeFlag" lay-filter="mergeFlag">
                    <option value="false">否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">影藏该列</label>
            <div class="layui-input-inline">
                <select name="hide" lay-filter="hide">
                    <option value="false">否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">开启排序</label>
            <div class="layui-input-inline">
                <select name="sort" lay-filter="sort">
                    <option value="false">否</option>
                    <option value="true">是</option>
                </select>
            </div>
        </div>


        <div class="layui-inline">
            <label class="layui-form-label">自定义</label>
            <div class="layui-input-inline">
                <div class="layui-input-inline"  onclick="commonUtil.openPage('自定义','editTextArea.html?|templet','60%','60%')" >
                    <textarea name="templet" id="templet" style="min-height:38px;height:36px;" placeholder="支持HTML如:<a>{{d.field}}</a>" readonly class="layui-input"></textarea>
                </div>
            </div>
        </div>

        <div class="layui-inline">
            <label class="layui-form-label">自定义CSS</label>
            <div class="layui-input-inline">
                <input type="text" name="style"  placeholder="示例： color: #fff;"  autocomplete="off" class="layui-input">
            </div>
        </div>

    </div>

    <div class="layui-collapse" lay-accordion>
        <div class="layui-colla-item">
            <h2 class="layui-colla-title">高级属性</h2>
            <div class="layui-colla-content" style="padding-left: 0px">

                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">数据类型</label>
                        <div class="layui-input-inline">
                            <select name="dataType" lay-filter="dataType">
                                <option value="String" selected>字符串</option>
                                <option value="Number">数字</option>
                                <option value="Date">日期</option>
                            </select>
                        </div>
                    </div>


                    <div class="layui-inline">
                        <label class="layui-form-label">是否主键</label>
                        <div class="layui-input-inline">
                            <select name="primaryKey" lay-filter="primaryKey">
                                <option value="false">否</option>
                                <option value="true">是</option>
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">主键值</label>
                        <div class="layui-input-inline">
                            <input type="text" name="primaryValue"  placeholder="自增主键无需填写"  autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-form-item layui-layout-admin">
        <div class="layui-input-block">
            <div class="layui-footer" style="left: 0;">
                <button class="layui-btn" lay-submit="" lay-filter="xd-table-col-form-bt">保存</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>

</form>

</body>

<script type="text/javascript">

    function initFieldSelect(formSelects,mergeFlag,value){
        if(mergeFlag == "true"){
            if($("#xdtable-mergeField-item").length == 0 ){
                $("#xdtable-mergeFlag-item").after($("#xdtable-mergeField-item-dom").html())
                formSelects.data("mergeRefField","server",{
                    url:basePath+"/xdTableColCfg/getFieldSelect"+urlParam,
                    success: function (id, url, searchVal, result) {
                        formSelects.value("mergeRefField",[value])
                    }
                })
            }
        }else{
            $("#xdtable-mergeField-item").remove()
        }

    }


    layui.config({
        base: basePath+'/layui/lay/modules/'
    }).extend({
        formSelects: 'formSelects-v4'
    }).use([ 'form','formSelects','element' ], function() {
        var $ = layui.$
        var layer = layui.layer
        var form = layui.form
        var formSelects = layui.formSelects;
        var element = layui.element;

        $.getJSON(basePath+"/xdTableColCfg/getOne"+urlParam,function(rst){
            if(rst.code != 0){
                layer.msg(rst.msg)
            }else{
                form.val("xd-table-col-form",rst.data)
                var mergeFlag = rst.data.mergeFlag
                var mergeRefField = rst.data.mergeRefField
                initFieldSelect(formSelects,mergeFlag,mergeRefField)
            }
        })

        form.on("submit(xd-table-col-form-bt)",function(obj){
            $.post(basePath+"/xdTableColCfg/update",obj.field,function(rst){
                if(rst.code !=0 ){
                    layer.alert(rst.msg)
                }else{
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    parent.widgetUtil.initTableCols(rst.data)
                }
            },"json")

            return false
        })


        form.on('select(mergeFlag)', function(data){
            var mergeFlag = data.value
            initFieldSelect(formSelects,mergeFlag,null)
        });


    });


</script>

<script type="text/html" id="xdtable-mergeField-item-dom">
    <div class="layui-inline" id="xdtable-mergeField-item">
        <label class="layui-form-label">参照列</label>
        <div class="layui-input-inline">
            <select xm-select="mergeRefField" xm-select-radio=""  xm-select-height="36px" xm-select-search="" name="mergeRefField" id="mergeRefField" >

            </select>
        </div>
    </div>
</script>